import React, { useState } from 'react'
import { ResultPage, Card, Switch, Button, Image, Swiper, CalendarPicker } from 'antd-mobile'
import styles from './index.module.css'
import { LoopOutline } from 'antd-mobile-icons'
import { useSelector, useDispatch } from 'react-redux'
import { cityle } from '../../store/cityle'
import { changecity, day } from '../../store/cityle'
import { data, useNavigate } from 'react-router-dom'
import dayjs from 'dayjs'
function Home() {
    let navtion = useNavigate()
    // const images = [
    //     'https://img.yzcdn.cn/vant/apple-1.jpg',
    //     'https://img.yzcdn.cn/vant/apple-2.jpg',
    //     'https://img.yzcdn.cn/vant/apple-3.jpg',
    //     'https://img.yzcdn.cn/vant/apple-4.jpg',
    //     'https://img.yzcdn.cn/vant/apple-5.jpg',
    //     'https://img.yzcdn.cn/vant/apple-6.jpg',
    //     'https://img.yzcdn.cn/vant/apple-7.jpg',
    //     'https://img.yzcdn.cn/vant/apple-8.jpg',
    // ]
    const { start, end, date } = useSelector((state) => state.cityle);
    const dispatch = useDispatch()
    const [visible1, setVisible1] = useState(false)
    const onchaxun = () => {
        navtion(`list?statr=${start}&end=${end}&date=${date}`)
    }
    return (
        <div>
            <ResultPage
                status=''
                title='火车票'
                description='便捷出行，服务你每一次出行'
            >
                <Card style={{ height: 128, marginTop: 12 }}>
                    <div className={styles.citylss}>
                        <span onClick={() => navtion('/city/start')}>{start}</span>
                        <LoopOutline onClick={() => dispatch(changecity())} />
                        <span onClick={() => navtion('/city/end')}>{end}</span>
                    </div>
                    {/* 时间 */}
                    <div>
                        <span onClick={() => setVisible1(true)}>
                            {
                                date
                            }
                        </span>

                    </div>
                    <div>  <Switch />高铁/动车     直达特价</div>
                    <div>   <Button block color='primary' size='large' onClick={() => onchaxun()}>
                        查询火车票
                    </Button>
                      <Button block color='primary' size='large' onClick={() =>navtion()}>
                      乘车人
                    </Button>
                    </div>
                </Card>
                {/* <div className="demo_swiper">
                    <Swiper>
                        {images.map((image) => (
                            <Swiper.Item key={image}>
                                <Image lazyload src={image} />
                            </Swiper.Item>
                        ))}
                    </Swiper>
                </div> */}
            </ResultPage>


            {/* 日历 */}
            <CalendarPicker
                min={Date.now()}
                max={Date.now() + 15* 24 * 60 * 60 * 1000}
                visible={visible1}
                selectionMode='single'
                onChange={(val) => {
                    dispatch(day({ date: dayjs(val).format('YYYY-MM-DD') }))
                    setVisible1(false)
                }}
                onClose={() => setVisible1(false)}
                onMaskClick={() => setVisible1(false)}
            />
            
        </div>
    )
}

export default Home
